import React, { useState } from "react";
import { Layout, Menu, Spin } from "antd";
import useAccess from "@/access/useAccess";
import { useCallback } from "react";
import { useNavigate } from "react-router-dom";
import usePath from "@/hooks/usePath";
import { useMemo } from "react";
const { Sider } = Layout;
export default () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigation = useNavigate();
  const { menuList, menuMapId } = useAccess();

  const [currentMenu] = usePath();

  const selectKeys = useMemo(() => {
    return currentMenu.map((item) => `${item?.id}`);
  }, [currentMenu]);

  const onClick = useCallback(
    ({ key }: { key: any }) => {
      const menu = menuMapId?.[key];
      navigation(menu?.router);
    },
    [menuMapId]
  );
  if (!menuList?.length) {
    return <Spin />;
  }
  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={(value) => setCollapsed(value)}
    >
      <div
        style={{
          height: 50,
          width: 50,
          margin: 16,
          backgroundSize: "100% 100%",
          backgroundImage: `url(${require("@/assets/logo.png")})`,
        }}
      >
        <span style={{ color: "#fff", fontSize: 32, paddingLeft: 65 }}>
          Admin
        </span>
      </div>
      <Menu
        theme="dark"
        onClick={onClick}
        defaultOpenKeys={selectKeys}
        defaultSelectedKeys={selectKeys}
        mode="inline"
        items={menuList}
      />
    </Sider>
  );
};
